<template>
    <div>看控制台打印</div>
    <button @click="setNull">设置为空</button>
    <button @click="setValue">设置非空{{ counter }}</button>
    <button @click="print">Print</button>
    <div>
        <Child ref="child" />
    </div>
    <div>
       <p>当更新响应式的对象中的某个属性时，新的属性值仍然有响应性</p>
       <p>但是如果将响应对象中的某个属性（rangeObj）作为入参传入方法，之后再更新这个响应对象的这个属性（rangeObj）, 那么方法中的 rangeObj 与 响应对象中的 rangeObj 就不是一个对象了</p>
       <p>上面的按钮 点过 <strong>设置为空</strong> 以后 <strong>changeRemark</strong> 按钮触发的更新就不会再响应到页面上了, 但是 <strong>changeRemark2</strong>, 仍然可以，因为 <strong>changeRemark2</strong>操控的对象始终与组件模板绑定的是同一个对象</p>
       <p>这个对组件设计的要求更高了， 要分析哪些属性的关联性强，放在同一对象中管理</p>
    </div>
</template>
<script setup lang="ts">
import { ref, toRef } from 'vue';
import Child from './child.vue'

const counter = ref(0)

const child = ref<InstanceType<typeof Child> | null>(null)
const setNull = () => {

    if(child.value){
        child.value.data.rangeObj = null
        child.value.data2.rangeObj = null
    }
    print()
}
const setValue = () => {

    if(!child.value || !child.value.data || !child.value.data2){
        return
    }

    if(!child.value.data.rangeObj){
        child.value.data.rangeObj = {}
    }
    counter.value++
    child.value.data.rangeObj.remark = 'one_'+ counter.value + ''

    if(!child.value.data2.rangeObj){
        child.value.data2.rangeObj = {}
    }
    child.value.data2.rangeObj.remark = 'two_' + counter.value + ''
    print()
}

const print = () => {
    console.log(child)
    console.log(child.value)
    console.log(child.value?.data?.rangeObj?.remark)
    child.value?.printMe()
}
</script>